<template>
  <div class="v-left-item">
    <button :disabled="!editable"
            type="button"
            v-if="toolbars.bold"
            @click="$clicks('bold')"
            class="op-icon fa fa-mavon-bold"
            aria-hidden="true"
            :title="`${d_words.tl_bold} (ctrl+b)`">
    </button>
    <button
      :disabled="!editable"
      type="button"
      v-if="toolbars.italic"
      @click="$clicks('italic')"
      class="op-icon fa fa-mavon-italic"
      aria-hidden="true"
      :title="`${d_words.tl_italic} (ctrl+i)`">
    </button>
    <button :class="{'selected': s_header_dropdown_open}"
            :disabled="!editable"
            type="button"
            v-if="toolbars.header"
            @mouseleave="$mouseleave_header_dropdown"
            @mouseenter="$mouseenter_header_dropdown"
            class="op-icon fa fa-mavon-header dropdown dropdown-wrapper"
            aria-hidden="true"
            :title="`${d_words.tl_header} (ctrl+h)`">
      <transition name="fade">
        <ul class="op-header popup-dropdown"
            v-show="s_header_dropdown_open"
            @mouseenter="$mouseenter_header_dropdown"
            @mouseleave="$mouseleave_header_dropdown">
          <li title="#" class="dropdown-item" @click.stop="$click_header('header1')"><span>{{d_words.tl_header_one}}</span></li>
          <li title="## " class="dropdown-item" @click.stop="$click_header('header2')"><span>{{d_words.tl_header_two}}</span></li>
          <li title="### " class="dropdown-item" @click.stop="$click_header('header3')"><span>{{d_words.tl_header_three}}</span></li>
          <li title="#### " class="dropdown-item" @click.stop="$click_header('header4')"><span>{{d_words.tl_header_four}}</span></li>
          <li title="##### " class="dropdown-item" @click.stop="$click_header('header5')"><span>{{d_words.tl_header_five}}</span></li>
          <li title="###### " class="dropdown-item" @click.stop="$click_header('header6')"><span>{{d_words.tl_header_six}}</span></li>
        </ul>
      </transition>
    </button>
    <span v-if="toolbars.header || toolbars.italic || toolbars.bold" class="op-icon-divider"></span>
    <button :disabled="!editable" type="button" v-if="toolbars.underline" @click="$clicks('underline')"
            class="op-icon fa fa-mavon-underline"
            :title="`${d_words.tl_underline} (ctrl+u)`" aria-hidden="true"></button>
    <button :disabled="!editable" type="button" v-if="toolbars.strikethrough" @click="$clicks('strikethrough')"
            class="op-icon fa fa-mavon-strikethrough"
            :title="`${d_words.tl_strikethrough} (ctrl+shift+d)`" aria-hidden="true"></button>
    <button :disabled="!editable" type="button" v-if="toolbars.mark" @click="$clicks('mark')"
            class="op-icon fa fa-mavon-thumb-tack" :title="`${d_words.tl_mark} (ctrl+m)`"
            aria-hidden="true"></button>
    <button :disabled="!editable" type="button" v-if="toolbars.superscript" @click="$clicks('superscript')"
            class="op-icon fa fa-mavon-superscript"
            aria-hidden="true" :title="`${d_words.tl_superscript} (ctrl+alt+s)`"></button>
    <button :disabled="!editable" type="button" v-if="toolbars.subscript" @click="$clicks('subscript')"
            class="op-icon fa fa-mavon-subscript"
            aria-hidden="true" :title="`${d_words.tl_subscript} (ctrl+shift+s)`"></button>
    <button :disabled="!editable" type="button" v-if="toolbars.alignleft" @click="$clicks('alignleft')"
            class="op-icon fa fa-mavon-align-left"
            aria-hidden="true" :title="`${d_words.tl_alignleft} (ctrl+l)`">
    </button>
    <button :disabled="!editable" type="button" v-if="toolbars.aligncenter" @click="$clicks('aligncenter')"
            class="op-icon fa fa-mavon-align-center"
            aria-hidden="true" :title="`${d_words.tl_aligncenter} (ctrl+e)`"></button>
    <button :disabled="!editable" type="button" v-if="toolbars.alignright" @click="$clicks('alignright')"
            class="op-icon fa fa-mavon-align-right"
            aria-hidden="true" :title="`${d_words.tl_alignright} (ctrl+r)`"></button>
    <span v-if="toolbars.superscript || toolbars.subscript || toolbars.underline || toolbars.strikethrough || toolbars.mark"
          class="op-icon-divider"></span>

    <button :disabled="!editable" type="button" v-if="toolbars.quote" @click="$clicks('quote')"
            class="op-icon fa fa-mavon-quote-left" aria-hidden="true"
            :title="`${d_words.tl_quote} (ctrl+q)`"></button>
    <button :disabled="!editable" type="button" v-if="toolbars.ol" @click="$clicks('ol')"
            class="op-icon fa fa-mavon-list-ol" aria-hidden="true"
            :title="`${d_words.tl_ol} (ctrl+o)`"></button>
    <button :disabled="!editable" type="button" v-if="toolbars.ul" @click="$clicks('ul')"
            class="op-icon fa fa-mavon-list-ul" aria-hidden="true"
            :title="`${d_words.tl_ul} (ctrl+alt+u)`"></button>
    <button :class="{'selected':s_emoji_select_open}"
            :disabled="!editable" type="button"
            v-if="toolbars.emoji"
            @click="$click_emoji"
            :title="`${d_words.tl_emoji}`"
            class="op-icon fa fa-mavon-emoji dropdown dropdown-wrapper"
            aria-hidden="true">
    </button>

    <span v-if="toolbars.ul || toolbars.ol || toolbars.quote || toolbars.emoji" class="op-icon-divider"></span>

    <button :disabled="!editable" type="button" v-if="toolbars.link" @click.stop="$toggle_imgLinkAdd('link')"
            class="op-icon fa fa-mavon-link" aria-hidden="true"
            :title="`${d_words.tl_link} (ctrl+l)`"></button>
    <button :disabled="!editable" :class="{'selected': s_img_dropdown_open}"
            type="button" v-if="toolbars.imagelink"
            @mouseleave="$mouseleave_img_dropdown" @mouseenter="$mouseenter_img_dropdown"
            class="op-icon fa fa-mavon-picture-o dropdown dropdown-wrapper"
            aria-hidden="true">
      <transition name="fade">
        <div class="op-image popup-dropdown" v-show="s_img_dropdown_open" @mouseleave="$mouseleave_img_dropdown" @mouseenter="$mouseenter_img_dropdown">
          <div class="dropdown-item" @click.stop="$toggle_imgLinkAdd('imagelink')"><span>{{d_words.tl_image}}</span></div>
          <div class="dropdown-item" style="overflow: hidden">
            <input type="file"
                   accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
                   @change="$imgAdd($event)"
                   :key="img_file[0][0]"
                   multiple="multiple" />{{d_words.tl_upload}}
          </div>

          <div class="dropdown-item dropdown-images" :title="item[1].name" v-if="index > 0" v-for="(item, index) in img_file" @click.stop="$imgFileListClick(index)">
            <span>{{item[1].name}}</span>
            <button slot="right" type="button" @click.stop="$imgDel(index)"
                    class="op-icon fa fa-mavon-trash-o" aria-hidden="true"
                    :title="d_words.tl_upload_remove"></button>
            <!-- 缩略图展示 -->
            <img class="image-show" :src="item[1].miniurl" alt="none" />
          </div>
        </div>
      </transition>
    </button>

    <button :disabled="!editable" type="button" v-if="toolbars.code" @click="$clicks('code')"
            class="op-icon fa fa-mavon-code" aria-hidden="true"
            :title="`${d_words.tl_code} (ctrl+alt+c)`"></button>
    <button :disabled="!editable" type="button" v-if="toolbars.table" @click="$clicks('table')"
            class="op-icon fa fa-mavon-table" aria-hidden="true"
            :title="`${d_words.tl_table} (ctrl+alt+t)`"></button>
    <span v-if="toolbars.link || toolbars.imagelink || toolbars.code || toolbars.table"
          class="op-icon-divider"></span>
    <button type="button" v-if="toolbars.undo" @click="$clicks('undo')" class="op-icon fa fa-mavon-undo"
            aria-hidden="true" :title="`${d_words.tl_undo} (ctrl+z)`"></button>
    <button type="button" v-if="toolbars.redo" @click="$clicks('redo')" class="op-icon fa fa-mavon-repeat"
            aria-hidden="true"
            :title="`${d_words.tl_redo} (ctrl+y)`"></button>
    <button type="button" v-if="toolbars.trash" @click="$clicks('trash')" class="op-icon fa fa-mavon-trash-o"
            aria-hidden="true"
            :title="`${d_words.tl_trash} (ctrl+breakspace)`"></button>
    <button type="button" v-if="toolbars.save" @click="$clicks('save')" class="op-icon fa fa-mavon-floppy-o"
            aria-hidden="true"
            :title="`${d_words.tl_save} (ctrl+s)`"></button>

    <!-- 添加image链接 -->
    <transition name="fade">
      <div class="add-image-link-wrapper" v-if="s_img_link_open">
        <div class="add-image-link">
          <i @click.stop.prevent="s_img_link_open = false" class="fa fa-mavon-times"
             aria-hidden="true"></i>
          <h3 class="title">{{link_type == 'link' ? d_words.tl_popup_link_title : d_words.tl_popup_img_link_title}}</h3>
          <div class="link-text input-wrapper">
            <input ref="linkTextInput" type="text" v-model="link_text" :placeholder="link_type == 'link' ? d_words.tl_popup_link_text : d_words.tl_popup_img_link_text" />
          </div>
          <div class="link-addr input-wrapper">
            <input type="text" v-model="link_addr" :placeholder="link_type == 'link' ? d_words.tl_popup_link_addr : d_words.tl_popup_img_link_addr" />
          </div>
          <div class="op-btn cancel" @click.stop="s_img_link_open = false">{{d_words.tl_popup_link_cancel}}</div>
          <div class="op-btn sure" @click.stop="$imgLinkAdd()">{{d_words.tl_popup_link_sure}}</div>
        </div>
      </div>
    </transition>
    <!--选择表情-->
    <transition name="fade">
      <div class="select-emoji-wrapper" v-show="s_emoji_select_open">
        <div class="select-emoji">
          <i @click.stop.prevent="s_emoji_select_open = false" class="fa fa-mavon-times"
             aria-hidden="true"></i>
          <div class="emoji-items scroll-style">
            <ul>
              <li class="select-emoji-item" v-for="emoji in d_emoji">
                <span class="op-icon" @click.stop="$add_emoji(emoji.shortcode)"
                      v-html="emoji.codepoint"></span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </transition>
  </div>

</template>
<script type="text/ecmascript-6"  src="./index.js"></script>
